<!--
  告警地图modal
  数据不需要查询，直接用列表数据封装即可
  value:{
    point:[lnt,lat]
    map:{
      '车牌号':this.value.plateNumber,
      '驾驶员':this.value.driverName,
      '停车状态':this.value.status?'熄火停车':'怠速停车',
      '告警地点':this.value.address,
      '开始时间':this.value.stopStartTime,
      '结束时间':this.value.stopEndTime,
      '停车时长':this.value.stopDurationStr
    }
  }
-->
<template>
  <Modal :value="show" @on-visible-change="changeModal" title="查看地图" width="900px" :footerHide="true">
    <div class="map-container">
      <div class="map-right">
        <Maputil ref="maputil" :map="map" :config="[true,true,false,false,false,false,false]"></Maputil>
      </div>
      <div id="js_alarm_map" style="width:100%;height:calc(70vh - 51px);"></div>
      <div class="map-window">
        <Card :padding="10">
          <table class="infowindow-table">
            <tr v-for="(v,k,i) in value.map" :keys="`map-info-${i}`">
              <td class="label">{{k}}：</td>
              <td>{{v||'--'}}</td>
            </tr>
          </table>
        </Card>
      </div>
    </div>
    <Spin size="large" fix v-if="isModalLoading"></Spin>
    <div slot="footer">
      <Button type="text" @click="closeModal">关闭</Button>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
  .ivu-card{
    margin-top: 0;
  }
  .map-container{
    position: relative;margin: -15px;
    .map-right{
      position: absolute;right: 10px;top:280px;z-index: 200;
    }
    .map-window{
      position: absolute;top: 10px;right: 10px;
    }
  }
  .infowindow-table {
    width: 270px;
    td {
      padding: 3px 5px;
    }
    .label {
      width: 30%;text-align: right;vertical-align: top;
    }
  }
</style>
<script>
	import {mapState,mapActions,mapMutations} from 'vuex'
  import Map        from '@/plugin/Map'
  import alarmIcon  from '@/assets/images/mapIcons/alarm.png'

  let map;
  export default {
    props:['value','show'],
    mounted(){
     this.map =  map = new Map('js_alarm_map', {
          resizeEnable: true,
          zoom:16,
          center: [116.397428, 39.90923]
      });
    },
    data(){
      return {
        map,
        isModalLoading:false
      }
    },
    computed:{

    },
    methods:{
      changeModal(e){
        !e && map.clearMap();
        !e && this.closeModal();

        if (e && this.value) {
          let alarmMarker = new AMap.Marker({
            map,position:this.value.point,title:'告警地点',
            icon: new AMap.Icon({image:alarmIcon,size:new AMap.Size(21,35),imageSize:new AMap.Size(21,35)})
          });
          map.setCenter(this.value.point);
          map.setZoom(16);
        }
      },
      closeModal() {
        this.$refs.maputil.reset();
        this.$emit('close');
      }
    }
  };
</script>
